<template>
  <div class="left-bottom">
    <!-- 左侧下部组件内容 -->

    <el-button type="primary" @click="addnewanswer()" size="mini"
      >新增问题</el-button
    >
    <!-- {{ tableData }} -->

    <div
      v-for="(item, index) in tableData.list"
      :key="index"
      style="width: 90%; margin: 0 auto; margin-top: 2rem;"
    >
      <el-row>
        <el-col :span="3">问题{{ index + 1 }}:</el-col>
        <el-col :span="19">{{ item.content }}</el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="3">答案:</el-col>
        <el-col :span="19">{{ item.answer }}</el-col>
      </el-row>

      <el-row style="margin-top: 10px">
        <el-col :span="3" v-for="(it, ind) in item.verifyAnswerValues" :key="ind">
          <el-radio :label="it.answerValueName" v-model="selectedValue"></el-radio>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "LeftBottomComponent",
  props: ["tableData", "option"],
  components: {},
  data() {
    return {
      // 左侧底部组件数据
      selectedValue: ""
    };
  },
  methods: {
    addnewanswer() {
      console.log("新增问题");
      this.$emit("addnewanswer");
    }
  }
};
</script>

<style scoped>
.left-bottom {
  /* 样式 */
}
</style>
